為什麼我要參加鐵人賽？

其實只是想要給自己留下一個紀錄(希望可以記住我的名子)以及希望可以幫助到跟我一樣的初學者，讓他們知道其實在這條學習的路上，你們不孤單啊！(你們還有我XD)

變數

今天第一天我們就先從JavaScript的變數開始說起吧！想像一下變數就像一個容器一樣，可以儲存我們想要存下來的資料，方便我們之後可以拿去做其他運算。而變數的基本規則是：

1. 變數第一個字母必須為英文字、底線、或者是＄字號
2. 不可以是保留字(reserved)和關鍵字(keyword)

值得注意的是在JavaScript裡面英文字母的大小寫是有差別的哦！如果寫錯的話是會沒有效果的(快被炸死了XD)

那我們要怎樣使用變數？

非常簡單宣告變數有三種方式，我們可以使用 var 或者是 let 還有 const 宣告方法的如下：

var a = 1
let b = 2
const c = 3

我們先來介紹 var 和 let 的差別在哪裡呢？兩者最大的差異在於他們的作用範圍不同

var 和 let 以及 const 的作用範圍

var 的作用範圍是全域範圍，而宣告過的名子是會被後者覆蓋的

//全域範圍變數 function scope

範例 1

var name = jojo; //第一次宣告 name

var name = 'jerry' //第二次宣告 name (將會覆蓋相同變數名)

// console.log(name); //印出結果: jerry

範例 2

var num = 5; //第一次宣告 num

//宣告一個函數 hello, 裡面第二次宣告 num
function hello(){
    var num = 50;
    return num;
}

//輸出結果: 5 (原因是第二次宣告 num 變數作用範圍屬於 block scope, 也就是區域範圍不受全域範圍覆蓋影響)
console.log(num);

//輸出結果: 50 (原因是 hello 函數內的 num 變數屬於區域範圍不受全域範圍影響, 所以第一次宣告的 num 變量無法覆蓋)
console.log(hello());

再來我們介紹 let 的作用範圍

let 是區域範圍並請同變量名不可覆蓋的

//區域範圍變數 block scope

範例 1 正常方式

let name = 'jojo'; //第一次宣告 let 變數 name

console.log(name); //輸出結果: jojo


範例 2 報錯方式

let name = 'jojo'; //第一次宣告 let 變數 name

let name = 'jerry'; //第二次宣告 let 變數 name

//輸出結果: SyntaxError: Identifier 'name' has already been declared 
(相同 let 變數不可覆蓋)
console.log(name);

範例 3 區域範圍宣告相同 let 變數不會報錯

let name = 'jojo'; //第一次宣告 let 變數名 name

function hello(){
    let name = "jerry"; //第二次宣告 let 變數名 name
    return name;
}

//輸出結果: jojo
console.log(name);

//輸出結果: jerry (不會被第一次宣告 let 變量名覆蓋, 原因是屬於區域範圍, 
而且不會報錯)
console.log(hello());

終於來到最後了，我們來看看const的作用範圍是怎樣的吧！

const 與 let 都是區域範圍，不一樣的是 const 的值是不能被覆蓋，除了陣列、物件外。

// 區域範圍變數 block scope

範例 1 

const name = 'jojo'; //第一次宣告 const 變數名 name

function hello(){
    name = 'jerry';
    return name;
}

//輸出結果: 報錯 -> (Assignment to constant variable.
因為我們不能夠直接將 const 宣告的 name 直接更改) 
console.log(hello());

範例 2 

const name = 'jojo'; //第一次宣告 const 變數名 name

function hello(){
    const name = 'jerry';
    return name;
}

//輸出結果: jerry 正常 -> (因為我們在區域內重新宣告 const 宣告的 name) 
console.log(hello());

範例 3 可更改的情況下 

//第一次宣告 const 變量名 name
const thisMe = {
    name: 'jerry',
    age: 18
}

//這樣的方式更改物件內容值是允許的
thisMe.name = 'jojo'



//輸出結果: { name: 'jojo', age: 18 }  
console.log(thisMe);

相信大家看完之後應該了解 var 和 let 還有 const 之間的差別了吧！那我們就明天見囉！:smile:

參考資料

• 重新認識 JavaScript: Day 03 變數與資料型別